<template>
  <div class="about">
    <div class="user">
      <el-avatar :src="userInfo.avatar" :size="100" />
      <p>
        <span>昵称:</span>
        <span>{{ userInfo.name }}</span>
      </p>
      <p>
        <span>性别:</span>
        <span>{{ userInfo.sex }}</span>
      </p>
      <p>
        <span>城市:</span>
        <span>{{ userInfo.city }}</span>
      </p>
      <p>
        <span>电话:</span>
        <span>{{ userInfo.phone }}</span>
      </p>
      <p>
        <span>动态:</span>
        <span>{{ userInfo. trends}}</span>
      </p>
      <p>
        <span>关注:</span>
        <span>{{ userInfo.concern}}</span>
      </p>
      <p>
        <span>粉丝:</span>
        <span>{{ userInfo.fans }}</span>
      </p>
    </div>

    <div class="cont">
      <h4>仓库地址</h4>
      <p><a href="https://gitee.com/li-xinglian/professional-skills" target="_blank">https://gitee.com/li-xinglian/professional-skills</a></p>

      <h4>个人简介</h4>
      <p class="info">{{ userInfo.desc }}</p>

      <el-divider />

      <h4>知识图谱</h4>
      <p class="info">{{ userInfo.about }}</p>

      
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';
import router from '@/router';
import { useStore } from 'vuex';
import User from '@/mock/about'; 

const store = useStore();
const userInfo = ref(null); 

userInfo.value = User;

onMounted(() => {
  if (!store.getters.isLoggedIn) {
    ElMessageBox.alert('请先登录', '提示', {
      confirmButtonText: '去登录',
      showClose: false, 
      callback: action => {
        if (action === 'confirm') {
          setTimeout(() => {
            router.push('/login');
          }, 3000); 
        }
      },
    });
  }
});
</script>

<style scoped>
.about {
  padding: 3rem 1rem;
  display: flex;
  height: 120vh;
  background: #fff;
  width: 90%;
  gap: 30px;
}

.user {
  width: 28vw;
  height: 100vh;
  background: var(--bgColor);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

.user:hover,
.cont:hover {
  box-shadow: 2px 2px 8px #bbb;
}

.el-avatar img{
width: 3vw;
height: 3vh;
}

.user p {
  margin-top: 1vh;
  padding: 0.6rem;
  font-size: 2rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--borderColor);
}

.cont {
  flex: 1;
  padding: 1rem;
  background: var(--bgColor);
  height: 80vh;
}

h4 {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--textColor);
  font-size: 1.6rem;
}

.info {
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: 24px;
  color: #666;
}
</style>
